<script lang="ts" setup>
  import { useToggle } from '@vueuse/shared';
  import { ref } from 'vue';
  import { i18nTranslate } from '/@/i18n';
  // 弹出框显示
  defineProps<{
    list?: string[];
    title?: string;
    disabled?: boolean;
  }>();
  // 数据
  const settingList = ref([
    {
      name: i18nTranslate('Line'),
      line: [
        { name: i18nTranslate('StraightLine'), icon: 'icon-1.png' },
        { name: i18nTranslate('RayLine'), icon: 'icon-2.png' },
        { name: i18nTranslate('Segment'), icon: 'icon-3.png' },
      ],
    },
    {
      name: i18nTranslate('HorizontalLine'),
      line: [
        { name: i18nTranslate('HorizontalStraightLine'), icon: 'icon-4.png' },
        { name: i18nTranslate('HorizontalRayLine'), icon: 'icon-5.png' },
        { name: i18nTranslate('HorizontalSegment'), icon: 'icon-6.png' },
      ],
    },
    {
      name: i18nTranslate('VerticalLine'),
      line: [
        { name: i18nTranslate('VerticalStraightLine'), icon: 'icon-7.png' },
        { name: i18nTranslate('VerticalRayLine'), icon: 'icon-8.png' },
        { name: i18nTranslate('VerticalSegment'), icon: 'icon-9.png' },
      ],
    },
    {
      name: i18nTranslate('PriceLine'),
      line: [
        { name: i18nTranslate('PriceLine'), icon: 'icon-10.png' },
        { name: i18nTranslate('PriceChannelLine'), icon: 'icon-11.png' },
        { name: i18nTranslate('ParallelStraightLine'), icon: 'icon-12.png' },
        { name: i18nTranslate('FibonacciLine'), icon: 'icon-13.png' },
      ],
    },
  ]);
  // 弹出框显示
  const [popupShow, onToggleShow] = useToggle(false);
</script>
<template>
  <div class="setting">
    <div @click="() => !disabled && onToggleShow(true)">
      <slot></slot>
    </div>
    <VarPopup
      class="setting-popup"
      :show="popupShow"
      position="center"
      @close="onToggleShow(false)"
      @click-overlay="onToggleShow(false)"
    >
      <div class="setting-title">
        <p>{{ $t('Setting') }}</p>
        <div class="close_icon" @click.stop="onToggleShow(false)">
          <img :src="$img('common/close.png')" />
        </div>
      </div>
      <div class="setting-list">
        <div class="item-box">
          <div class="icon-box">
            <img :src="$img('trade/clear.png')" />
          </div>
          <p>ClearLine</p>
        </div>
      </div>
      <div class="setting-list">
        <div v-for="(item, index) in settingList" :key="index">
          <div class="setting-list-title">{{ item.name }}</div>
          <div class="line-box">
            <div class="item-box" v-for="(line, index2) in item.line" :key="index2">
              <div class="icon-box">
                <img :src="$img('trade/' + line.icon + '')" />
              </div>
              <p class="line-name">{{ line.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </VarPopup>
  </div>
</template>
<style lang="scss">
  .setting {
    .setting-popup {
      border-radius: 16px;
      padding: 30px 18px 60px 28px;
      margin: 0 75px;
      height: 60%;
      .setting-title {
        font-weight: bold;
        font-size: 36px;
        color: #000000;
        margin-bottom: 60px;
        @include center;

        .close_icon {
          width: 22px;
          height: 22px;
          position: absolute;
          top: 33px;
          right: 40px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .setting-list {
        .setting-list-title {
          font-size: 30px;
          font-weight: 600;
          margin: 20px 0;
        }
        .line-box {
          display: flex;
          flex-wrap: wrap;
        }
        .line-name {
          text-align: center;
        }
        .item-box {
          width: 174px;
          height: 120px;
          background: #f8f8f8;
          border-radius: 8px;
          font-size: 22px;
          color: #666666;
          padding: 20px;
          margin-bottom: 10px;
          margin-right: 10px;
          @include center;
          flex-direction: column;
          .icon-box {
            width: 32px;
            height: 32px;
            margin-bottom: 20px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>
